<template>
  <div class="side-bar">
    <el-menu
            class="el-menu-vertical-demo"
            text-color="#c6d0d4"
            active-text-color="#44aade"
            background-color="#373d41"
            :default-openeds="defaultOpen"
            router>
      <template v-for="item in menus">
        <el-submenu :index="item.index">
          <span class="title" slot="title"><i :class="item.icon"></i>{{item.title}}</span>
          <el-menu-item @click="isLogout && logout()" v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{subItem.title}}</el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "side-bar",
    data(){
      return {
        defaultOpen:['userManage','deviceManage','advertisementManage','accountManage'],
        menus:[
          {
            icon:'el-icon-menu',
            index:'deviceManage',
            title:'数据管理',
            subs:[
              {
                index:'searchData',
                title:'数据查询'
              }
            ]
          },
        ]
      }
    },
    computed:{
      isLogout(){
      }
    },
    methods:{

      }
  }
</script>

<style scoped lang="scss">
  @import '../../static/style/public';
  $titleSize:16px;
  .el-menu{
    border:none !important;
  }
  .el-menu-item{
    padding-left:70px !important;
  }
  .side-bar{
    position:absolute;
    left:0px;
    top:$topBarHeightMax;
    width:$asideWidth;
    bottom:0px;
    background: $backGroudColor;
    .title{
      color:white;
      i{
        padding:0px 10px;
        color:white;
        font-size:$titleSize + 4px;
      }
      font-size:$titleSize;
    }

  }
</style>
